<template>
  <div>
    <header>
      <el-button type="primary">生成二维码</el-button>
      <el-button type="primary"
                 @click="addData = true">添加素材</el-button>
    </header>
    <main>
      <el-table :data="tableData"
                v-loading="loading"
                @cell-mouse-enter="edit"
                tooltip-effect="dark"
                style="width: 90%; margin: auto;">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column prop="name"
                         label="昆虫名称">
        </el-table-column>
        <el-table-column prop="latinName"
                         label="拉丁学名">
        </el-table-column>
        <el-table-column prop="introduce"
                         label="昆虫简介"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="charge"
                         label="是否收费">
        </el-table-column>
        <el-table-column prop="handle"
                         label="操作">
          <template>
            <el-button type="text"
                       size="small"
                       @click="showImg = true">查看图片</el-button>
            <el-button type="text"
                       size="small"
                       @click="editData = true">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer>
      <el-pagination :current-page="pageNumber"
                     @current-change="currentPage"
                     :total="totalPage * 10"
                     background
                     hide-on-single-page
                     layout="prev, pager, next">
      </el-pagination>
    </footer>
    <!-- 查看图片 -->
    <el-dialog :visible.sync="showImg">
      <el-image :src="'insect/' + form.imageUrl">
        <div slot="placeholder">加载中...</div>
      </el-image>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改素材信息"
               width="30%"
               :visible.sync="editData">
      <el-form :model="form">
        <el-form-item label="昆虫名称"
                      class="label">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="拉丁学名"
                      class="label">
          <el-input v-model="form.latinName"></el-input>
        </el-form-item>
        <el-form-item label="上传声音"
                      class="label">
          <el-upload name="soundFile"
                     action="/insect/insect/uploadSound"
                     :limit="1"
                     accept="audio/wav,audio/mp3,audio/flac,audio/m4a"
                     :on-success="afterEditSound"
                     :auto-upload="true">
            <el-button slot="trigger"
                       size="small"
                       type="primary">选取文件</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传一张 wav/mp3/flac/m4a 文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否收费"
                      class="label">
          <el-switch v-model="form.charge"
                     active-text="是"
                     inactive-text="否"></el-switch>
        </el-form-item>
        <el-form-item label="上传icon"
                      class="label">
          <el-upload name="imageFile"
                     action="/insect/insect/uploadImg?type=1"
                     :limit="1"
                     accept="image/jpeg,image/jpg,image/png,image/gif,image/bmp"
                     :on-success="afterEditIcon"
                     :on-remove="handleRemove"
                     list-type="picture-card"
                     :auto-upload="true">
            <i class="el-icon-plus"></i>
            <div slot="tip"
                 class="el-upload__tip">只能一张上传 jpg/jpeg/png/gif/bmp 图片</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传图片"
                      class="label">
          <el-upload name="imageFile"
                     action="/insect/insect/uploadImg?type=0"
                     :limit="1"
                     accept="image/jpeg,image/jpg,image/png,image/gif,image/bmp"
                     :on-success="afterEditImg"
                     :on-remove="handleRemove"
                     list-type="picture-card"
                     :auto-upload="true">
            <i class="el-icon-plus"></i>
            <div slot="tip"
                 class="el-upload__tip">只能一张上传 jpg/jpeg/png/gif/bmp 图片</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="昆虫简介"
                      class="label">
          <el-input type="textarea"
                    autosize
                    :rows="2"
                    v-model="form.introduce">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editData = false">取 消</el-button>
        <el-button type="primary"
                   @click="editInsect">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog title="添加素材"
               width="30%"
               :visible.sync="addData">
      <el-form :model="addForm">
        <el-form-item label="昆虫名称"
                      class="label">
          <el-input v-model="addForm.name"
                    maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="拉丁学名"
                      class="label">
          <el-input v-model="addForm.latinName"
                    maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="上传声音"
                      class="label">
          <el-upload name="soundFile"
                     action="/insect/insect/uploadSound"
                     :limit="1"
                     accept="audio/wav,audio/mp3,audio/flac,audio/m4a"
                     :on-success="afterUploadSound"
                     :auto-upload="true">
            <el-button slot="trigger"
                       size="small"
                       type="primary">选取文件</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能一张上传 wav/mp3/flac/m4a 文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否收费"
                      class="label">
          <el-switch v-model="addForm.charge"
                     active-text="是"
                     inactive-text="否"></el-switch>
        </el-form-item>
        <el-form-item label="上传icon"
                      class="label">
          <el-upload name="imageFile"
                     action="/insect/insect/uploadImg?type=1"
                     :limit="1"
                     accept="image/jpeg,image/jpg,image/png,image/gif,image/bmp"
                     :on-success="afterUploadIcon"
                     :on-remove="handleRemove"
                     list-type="picture-card"
                     :auto-upload="true">
            <i class="el-icon-plus"></i>
            <div slot="tip"
                 class="el-upload__tip">只能一张上传 jpg/jpeg/png/gif/bmp 图片</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传图片"
                      class="label">
          <el-upload name="imageFile"
                     action="/insect/insect/uploadImg?type=0"
                     :limit="1"
                     accept="image/jpeg,image/jpg,image/png,image/gif,image/bmp"
                     :on-success="afterUploadImg"
                     :on-remove="handleRemove"
                     list-type="picture-card"
                     :auto-upload="true">
            <i class="el-icon-plus"></i>
            <div slot="tip"
                 class="el-upload__tip">只能一张上传 jpg/jpeg/png/gif/bmp 图片</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="昆虫简介"
                      class="label">
          <el-input type="textarea"
                    autosize
                    maxlength="300"
                    :rows="2"
                    placeholder="请输入昆虫简介"
                    v-model="addForm.introduce">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="noAddInsect">取 消</el-button>
        <el-button type="primary"
                   @click="addInsect"
                   :disabled="canClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ["reload"], //注入App里的reload方法
  data() {
    return {
      loading: true,
      // 在上传图片或音频的时候不能点击按钮
      canClick: true,
      // 上传音频是否完成
      uploadSound: false,
      // 上传图片是否完成
      uploadImg: false,
      // 修改dialog显示音频文件
      soundList: [{ name: "", url: "" }],
      // 修改dialog显示icon文件
      iconList: [{ name: "", url: "" }],
      // 修改dialog显示图片文件
      imgList: [{ name: "", url: "" }],
      showImg: false,
      editData: false,
      addData: false,
      totalPage: undefined,
      pageNumber: 1,
      pageSize: 9,
      form: {
        name: "",
        latinName: "",
        charge: "",
        introduce: "",
        id: "",
        icon: ""
      },
      addForm: { name: "", latinName: "", charge: 0, introduce: "", icon: "" },
      tableData: []
    };
  },
  computed: {
    clickable() {
      if (this.uploadSound && this.uploadImg) {
        return (this.canClick = false);
      } else {
        return (this.canClick = true);
      }
    }
  },
  watch: {
    // 监听添加昆虫的那个按钮是否可以点击
    clickable() {}
  },
  created() {
    this.currentPage(this.pageNumber);
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  methods: {
    edit(row) {
      this.form.name = row.name;
      this.form.latinName = row.latinName;
      this.form.charge = row.charge == "是" ? true : false;
      this.form.introduce = row.introduce;
      this.form.id = row.id;
      this.form.imageUrl = row.imageUrl;
      this.form.icon = row.icon;
      this.form.soundUrl = row.soundUrl;
      this.soundList[0] = {
        name: row.soundUrl.slice(row.soundUrl.indexOf("/") + 1),
        url: "/insectCamp/insect/" + row.soundUrl
      };
      this.iconList[0] = {
        name: row.name,
        url: "/insectCamp/" + row.icon
      };
      this.imgList[0] = {
        name: row.name,
        url: "/insectCamp/" + row.imageUrl
      };
    },
    // 修改昆虫信息
    editInsect() {
      let _this = this;
      if (
        this.form.name != "" &&
        this.form.latinName != "" &&
        this.form.icon != undefined &&
        this.form.imageUrl != undefined &&
        this.form.soundUrl != undefined &&
        this.form.introduce != ""
      ) {
        let data = new URLSearchParams();
        data.append("id", this.form.id);
        data.append("name", this.form.name);
        data.append("latinName", this.form.latinName);
        data.append("imageUrl", this.form.imageUrl);
        data.append("icon", this.form.icon);
        data.append("soundUrl", this.form.soundUrl);
        data.append("introduce", this.form.introduce);
        data.append("charge", this.form.charge == true ? "1" : "0");
        this.axios({
          method: "post",
          url: "/insect/updIns",
          data
        })
          .then(res => {
            if (res.data.code === 0) {
              this.message(res.data.msg, "success");
              this.editData = false;
              this.reload();
            } else {
              this.message(res.data.msg, "error");
            }
          })
          .catch(error => {
            this.message(error, "error");
          });
      } else {
        if (this.addForm.name == "") {
          this.message("请输入昆虫名称", "error");
        } else if (this.addForm.latinName == "") {
          this.message("请输入昆虫的拉丁学名", "error");
        } else if (this.addForm.imageUrl == undefined) {
          this.message("请选择昆虫图片", "error");
        } else if (this.addForm.soundUrl == undefined) {
          this.message("请上传昆虫声音", "error");
        } else if (this.addForm.introduce == "") {
          this.message("请填写昆虫简介", "error");
        } else {
          this.message("请将昆虫信息填写完整", "error");
        }
      }
    },
    // 添加昆虫信息
    addInsect() {
      console.log(this.addForm);
      if (
        this.addForm.name != "" &&
        this.addForm.latinName != "" &&
        this.addForm.icon != undefined &&
        this.addForm.imageUrl != undefined &&
        this.addForm.soundUrl != undefined &&
        this.addForm.introduce != ""
      ) {
        let data = new URLSearchParams();
        data.append("name", this.addForm.name);
        data.append("latinName", this.addForm.latinName);
        data.append("imageUrl", this.addForm.imageUrl);
        data.append("icon", this.addForm.icon);
        data.append("soundUrl", this.addForm.soundUrl);
        data.append("introduce", this.addForm.introduce);
        data.append("charge", this.addForm.charge == true ? "1" : "0");
        this.axios({
          method: "post",
          url: "/insect/addIns",
          data
        })
          .then(res => {
            if (res.data.code === 0) {
              this.message(res.data.msg, "success");
              this.addData = false;
              this.reload();
            } else {
              this.message(res.data.msg, "error");
            }
          })
          .catch(error => {
            this.message(error, "error");
          });
      } else {
        if (this.addForm.name == "") {
          this.message("请输入昆虫名称", "error");
        } else if (this.addForm.latinName == "") {
          this.message("请输入昆虫的拉丁学名", "error");
        } else if (this.addForm.imageUrl == undefined) {
          this.message("请选择昆虫图片", "error");
        } else if (this.addForm.soundUrl == undefined) {
          this.message("请上传昆虫声音", "error");
        } else if (this.addForm.introduce == "") {
          this.message("请填写昆虫简介", "error");
        } else {
          this.message("请将昆虫信息填写完整", "error");
        }
      }
    },
    // 分页查询昆虫信息
    currentPage(val) {
      this.pageNumber = val;
      this.axios({
        method: "get",
        url: "/insect/show",
        params: {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.totalPage = res.data.result.total;
            this.tableData = res.data.result.list;
            for (let i = 0; i < res.data.result.list.length; i++) {
              this.tableData[i].charge =
                this.tableData[i].charge == 0 ? "否" : "是";
            }
          } else {
            this.message(res.data.msg, "error");
          }
        })
        .catch(error => {
          this.message(error, "error");
        });
    },
    // 上传完Img之后执行的操作
    afterUploadImg(res) {
      if (res.code === 0) {
        this.addForm.imageUrl = res.result;
        this.message(res.msg, "success");
        this.uploadImg = true;
      } else {
        this.message(res.msg, "error");
      }
    },
    // 上传完icon之后执行的操作
    afterUploadIcon(res) {
      if (res.code === 0) {
        this.addForm.icon = res.result;
        this.message(res.msg, "success");
        this.uploadImg = true;
      } else {
        this.message(res.msg, "error");
      }
    },
    // 上传完Sound之后执行的操作
    afterUploadSound(res) {
      if (res.code === 0) {
        this.addForm.soundUrl = res.result;
        this.message(res.msg, "success");
        this.uploadSound = true;
      } else {
        this.message(res.msg, "error");
      }
    },
    // 修改完icon之后执行的操作
    afterEditIcon(res) {
      if (res.code === 0) {
        this.form.icon = res.result;
        this.message(res.msg, "success");
      } else {
        this.message(res.msg, "error");
      }
    },
    // 修改完Img之后执行的操作
    afterEditImg(res) {
      if (res.code === 0) {
        this.form.imageUrl = res.result;
        this.message(res.msg, "success");
      } else {
        this.message(res.msg, "error");
      }
    },
    // 修改完Sound之后执行的操作
    afterEditSound(res) {
      if (res.code === 0) {
        this.form.soundUrl = res.result;
        this.message(res.msg, "success");
      } else {
        this.message(res.msg, "error");
      }
    },
    // 删除图片
    handleRemove(file) {
      this.message("删除图片成功", "success");
    },
    // 取消上传昆虫信息清空input内容
    noAddInsect() {
      this.addData = false;
      this.addForm = { name: "", latinName: "", charge: "", introduce: "" };
    }
  }
};
</script>

<style scoped>
header {
  margin: 15px 0 25px 60px;
}
footer {
  float: right;
  margin: 25px 45px 20px 0;
}
.label >>> .el-form-item__label {
  font-size: 16px;
  font-weight: bold;
}
</style>
<style>
/*  全局样式，解决了table里tooltip默认width:100%的问题 */
.el-tooltip__popper {
  max-width: 600px !important;
}
</style>